<script setup>
// import vuex from ''
import { ref } from 'vue';
// 页面导航栏索引
const active = ref([
  {
    name: 1,
    title: '测温',
  },
  {
    name: 2,
    title: '数据',
  },
  {
    name: 3,
    title: '发现',
  },
  {
    name: 4,
    title: '我的',
  }
]);

</script>

<template>
  <div class="home">
    <div class="main">
        <router-view></router-view>
    </div>
    <van-tabbar class="tabbarBtoom" v-model="active.name">
      <van-tabbar-item icon="fire" to="/found">测温</van-tabbar-item>
      <van-tabbar-item icon="underway" to="/data">数据</van-tabbar-item>
      <van-tabbar-item icon="gem" to="/record">发现</van-tabbar-item>
      <van-tabbar-item icon="manager" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped>
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tabbarBtoom {
  height: 50px;
}

.main {
  height: calc(100% - 50px);
  /* overflow: hidden; */
}
</style>
